@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert-alertTop';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';

.alertTop {
  @include composite-var($alert-top-container-container);

  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  @each $color in $colors {
    &[data-color='#{$color}'] {
      @if $color == 'invert-neutral' {
        background-color: $sys-invert-neutral-background;
      }

 @else {
        background-color: simple-var($theme-variables, 'sys', $color, 'accent-default');
      }
    }
  }
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;

  @each $color in $colors {
    &[data-color='#{$color}'] {
      @if $color == 'invert-neutral' {
        color: $sys-invert-neutral-text-main;
      }

 @else {
        color: simple-var($theme-variables, 'sys', $color, 'on-accent');
      }
    }
  }

  svg {
    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
  }
}

.title {
  @include composite-var($sans-title-s);

  @each $color in $colors {
    &[data-color='#{$color}'] {
      @if $color == 'invert-neutral' {
        color: $sys-invert-neutral-text-main;
      }

 @else {
        color: simple-var($theme-variables, 'sys', $color, 'on-accent');
      }
    }
  }
}

.description {
  @include composite-var($sans-body-m);

  word-wrap: break-word;

  @each $color in $colors {
    &[data-color='#{$color}'] {
      @if $color == 'invert-neutral' {
        color: $sys-invert-neutral-text-main;
      }

 @else {
        color: simple-var($theme-variables, 'sys', $color, 'on-accent');
      }
    }
  }
}

.contentWrapper {
  display: flex;
  gap: $dimension-2m;
  align-items: center;
  min-width: 0;
}

.contentLayout {
  @include composite-var($alert-top-container-content-layout);

  display: flex;
  flex-direction: column;
  min-width: 0;
}

.textLayout {
  overflow: hidden;
}

.actions {
  display: flex;
  gap: $dimension-2m;
  align-items: center;
}
